<template>
  <div class="h-100 f f-col">
    <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>
    <div class="p-50 h-100 o-y-auto">


       <el-tabs v-model="activeName" type="card">
    
    <el-tab-pane label="管理员设置" name="second">

      <div class="f j-e">
    <el-button type="primary" @click="centerDialogVisible = true">添加管理员</el-button>
    </div>
<div class="p-50">
              <el-table
                  :data="tableData"
                  type="expand"
                  style="width: 100%">
                  <el-table-column
                    label="管理员姓名">
                    <template slot-scope="scope">
                      {{ scope.row.roleName }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="管理员编号">
                    <template slot-scope="scope">
                      {{ scope.row.roleCode }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="管理员账号">
                    <template slot-scope="scope">
                      {{ scope.row.userCode }}
                    </template>
                  </el-table-column>
                  
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        :disabled="scope.row.roleName == '超级管理员'"
                        size="mini"
                        type="primary"
                        @click="delectadmin(scope.row.userId)">删除管理员</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                </div>


    </el-tab-pane>
    <el-tab-pane label="系统设置" name="first">

      <el-row :gutter="20" class="w-100">
      <el-col :xs="0" :sm="2">&nbsp;</el-col>
      <el-col :xs="24" :sm="22">
          <div class="p-t-50">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="网站开关">
                <el-switch style="max-width:380px;" @change="changeWWW" v-model="form.t1"></el-switch>
              </el-form-item>
              <el-form-item label="网站风格">
                <el-color-picker v-model="form.t2" @change="changeWWW"></el-color-picker>
              </el-form-item>
              <el-form-item label="颜色参考">
                <a class="c999">https://www.bootcss.com/p/websafecolors/</a>
              </el-form-item>
          
            </el-form>
          </div>
      </el-col>
    </el-row>

    </el-tab-pane>
  </el-tabs>

    </div>



      <el-dialog
  title="添加管理员"
  :visible.sync="centerDialogVisible"
  width="30%"
  center>
  <el-input class="m-t-5" v-model="admin.t1" placeholder="管理员姓名"></el-input>
  <el-input class="m-t-5" v-model="admin.t2" placeholder="管理员编号(姓名首字母)"></el-input>
  <el-input class="m-t-5" v-model="admin.t3" placeholder="管理员账号"></el-input>
  <el-input class="m-t-5" v-model="admin.t4" placeholder="管理员密码"></el-input>
  
  
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="setAdmin()">确 定</el-button>
    <el-button @click="centerDialogVisible = false">取 消</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import {
  addAdmin,
  queryAdmin,
  delectAdmin,
  querySystem,
  editSystem
} from "../http/api";
export default {
  name: "setUp",
  data() {
    return {
      tableData: [],
      centerDialogVisible: false,
      activeName: "second",
      form: {
        t1: "",
        t2: "",
        id: ""
      },
      admin: {
        t1: "",
        t2: "",
        t3: "",
        t4: ""
      }
    };
  },
  created() {
    this.queryAdmin();
    this.querySystem();
  },
  methods: {
    changeWWW() {
      const data = {
        status: this.form.t1,
        topColors: this.form.t2,
        id: this.form.id
      };
      data.status = data.status ? "1" : "0";
      editSystem(data).then(res => {
        console.log({ 修改系统设置: res });
        this.querySystem();
      });
    },
    querySystem() {
      querySystem().then(res => {
        console.log({ 查询系统设置: res });
        this.form.t1 = res.data.status != "0" ? true : false;
        this.form.t2 = res.data.topColors;
        this.form.id = res.data.id;
      });
    },
    queryAdmin() {
      queryAdmin().then(res => {
        console.log({ 查询管理员: res });
        this.tableData = res.data;
      });
    },

    setAdmin() {
      if (
        !this.admin.t1 ||
        !this.admin.t2 ||
        !this.admin.t3 ||
        !this.admin.t4
      ) {
        this.$message({
          message: "管理员信息请填写完整！",
          type: "warning"
        });
        return;
      }

      const data = {
        roleName: this.admin.t1,
        roleCode: this.admin.t2,
        userCode: this.admin.t3,
        passWord: this.admin.t4
      };
      addAdmin(data).then(res => {
        console.log({ 新增管理员: res });
        this.centerDialogVisible = false;
        this.queryAdmin();
      });
    },
    // 删除管理员
    delectadmin(id) {
      const data = {
        id: id
      };
      delectAdmin(data).then(res => {
        console.log({ 删除管理员: res });
        this.queryAdmin();
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>